<html>

<head>
    <title>grapecity_spreadJS_demo</title>
    <script src="jquery_3.1.1.min.js" type="text/javascript"></script>
    <link rel="stylesheet" href="gc.spread.sheets.excel2013white.14.2.2.css" type="text/css">
    <script src="gc.spread.sheets.all.14.2.2.min.js" type="text/javascript"></script>
    <script src="gc.spread.excelio.14.2.2.min.js" type="text/javascript"></script>
    <script src="https://cdn.grapecity.com.cn/spreadjs/scripts/FileSaver.min.js" type="text/javascript"></script>
    <script src="gc.spread.sheets.resources.zh.14.2.2.min.js" type="text/javascript"></script>
    <script src="gc.spread.sheets.print.14.2.2.min.js" type="text/javascript"></script>
    <script src="gc.spread.sheets.pdf.14.2.2.min.js" type="text/javascript"></script>
    <script src="gc.spread.sheets.charts.14.2.2.min.js" type="text/javascript"></script>
    <script src="v14.js" type="text/javascript"></script>
    <style type="text/css">
        #ss{height:600px;width:100%}
        p{
            color: #336699;
            text-align: center;
            margin: 12px 0;
        }
        
        button{
            margin: 6px 0;
        }
    </style>
</head>

<body>
    <p>CheckBox导出Excel为复选框而不是布尔值</p>
    <button id="export">导出Excel</button>
    <div id="ss"></div>
    <script type="text/javascript">
        GC.Spread.Common.CultureManager.culture('zh-cn');
        window.onload = () => {
            let spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
            let sheet = spread.getActiveSheet();
            sheet.setColumnWidth(2,100);
            let c1 = new GC.Spread.Sheets.CellTypes.CheckBox();
            sheet.setCellType(3,2,c1);
            sheet.setValue(3,2,true);
            sheet.setValue(3,3,'是');
            let c2 = new GC.Spread.Sheets.CellTypes.CheckBox();
            sheet.setCellType(4,2,c2);
            sheet.setValue(4,2,false);
            sheet.setValue(4,3,'否');
            let c3 = new GC.Spread.Sheets.CellTypes.CheckBox();
            c3.isThreeState(true);
            c3.textTrue('check');
            c3.textFalse('uncheck');
            c3.textIndeterminate('unknow');
            sheet.setCellType(5,2,c3);
            sheet.setValue(5,2,true);
            
            const toExcel = (spread) => {
                    //导出时检查单元格类型
        			let spread_copy = new GC.Spread.Sheets.Workbook();
        			spread_copy.fromJSON(spread.toJSON())
        			let sheet = spread_copy.getActiveSheet()
        			let row = sheet.getRowCount()
        			let col = sheet.getColumnCount()
        			for(let i = 0;i < row;i++){
        				for(let j = 0; j < col; j++){
        					if(sheet.getCellType(i,j) instanceof GC.Spread.Sheets.CellTypes.CheckBox){
        						let text = ''
        						let checkbox = sheet.getCellType(i,j)
        						if(sheet.getCellType(i,j).isThreeState()){
        						;	text = sheet.getValue(i,j) ?  checkbox.textTrue() : (
        								sheet.getValue(i,j) == null ? checkbox.textIndeterminate() 
        								:
        								checkbox.textFalse()
        							)
        						}
        						sheet.setCellType(i,j,null)
        						sheet.getValue(i,j) ? sheet.setValue(i,j,'☑ ' + text)  : sheet.setValue(i,j,'☐ ' + text)	
        					}
        				}
        			}
        			return spread_copy.toJSON()
        		}
        		
        		const toExcelFile = (spread) => {
        		    //导出按钮触发动作
        			let excelIO = new GC.Spread.Excel.IO()
        			let json = toExcel(spread)
        			excelIO.save(json, (blob) => {
        			    console.log("hahha")
        				saveAs(blob,'checkbox.xlsx')
        			},(e) => {
        				console.log(e)
        			})
        		}
            
            $("#export").click(() => {
                toExcelFile(spread)
            })
            
            
            
        }
    </script>
</body>

</html>